<template>
  <div class="address">
    <Header :isLeft="true" title="选择当前所在地址"/>
    <div class="city_search">
      <div class="search">
        <span class="city" @click="$router.push('/city')">
          {{this.$route.query.city}}
          <i class="iconfont" style="font-size: 15px;margin-left: 43px;margin-top: -4px;">&#xe65d;  |</i>
        </span>
        <i class="iconfont" style="    margin-left: 69px;font-size: 20px;margin-top: -2px;">&#xe60e;</i>
        <input type="text" v-model="search_val" placeholder="请输入所在城市/所在区">
      </div>
      <Location @click="selectAddress" :address="address"/>
    </div>
    <div class="area">
      <ul class="area_list" v-for="(item,index) in areaList" :key="index">
        <li @click="selectAddress(item)">
          <h4>{{item.name}}</h4>
          <p>{{item.district}}{{item.address}}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
    import Header from "../../../components/Header";
    import Location from "../../../components/Location";
    export default {
        name: "Address",
        data() {
            return {
                city: "", // 当前的城市
                search_val: "",
                areaList: [],
            };
        },
        computed: {
            address() {
                return this.$store.getters.location.formattedAddress;
            }
        },
        watch: {
            search_val() {
                this.searchPlace();
            }
        },
        methods: {
            searchPlace() {
                const self = this;
                // console.log(this.search_val);
                AMap.plugin("AMap.Autocomplete", function() {
                    // 实例化Autocomplete
                    var autoOptions = {
                        //city 限定城市，默认全国
                        city: self.city
                    };
                    var autoComplete = new AMap.Autocomplete(autoOptions);
                    autoComplete.search(self.search_val, function(status, result) {
                        // 搜索成功时，result即是对应的匹配数据
                        // console.log(result);
                        self.areaList = result.tips;
                    });
                });
            },
            selectAddress(item) {
                // 设置地址
                if (item) {
                    this.$store.dispatch(
                        "setAddress",
                        item.district + item.address + item.name
                    );
                } else {
                    this.$store.dispatch("setAddress", this.address);
                }

                // 跳转home
                this.$router.push("/home");
            }
        },
        components: {
            Header,
            Location
        },
    };
</script>

<style scoped>
  .address {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-top: 45px;
    background-color: #eee;
  }

  .city_search {
    background-color: #fff;
    padding: 10px 20px;
    color: #333;
  }

  .search {
    background-color: #eee;
    height: 40px;
    border-radius: 10px;
    box-sizing: border-box;
    line-height: 40px;
  }
  .search .city {
    padding: 0 10px;
  }
  .city i {
    margin-right: 10px;
  }
  .search input {
    margin-left: 47px;
    background-color: #eee;
    outline: none;
    border: none;
    margin-top: -3px;
  }

  .area {
    margin-top: 16px;
    background: #fff;
  }
  .area li {
    border-bottom: 1px solid #eee;
    padding: 8px 16px;
    color: #aaa;
  }
  .area li h4 {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
  }
</style>
